<template>
  <div class="wrap">
    <div class="container w">
      <div class="head">
        <div><h2>购物车（全部25）</h2></div>
        <div>
          已选商品（不含运费）
          <em>
            <span>￥</span>12.80
          </em>
          <el-button type="primary" round size="medium">结算</el-button>
        </div>
      </div>
      <div class="body">
        <div class="t__header">
          <ul>
            <li><el-checkbox v-model="checked">全选</el-checkbox></li>
            <li>商品信息</li>
            <li>参数</li>
            <li>单价</li>
            <li>数量</li>
            <li>金额</li>
            <li>操作</li>
          </ul>
        </div>
        <div class="t__body" v-for="(item,index) in list" :key="index">
          <div class=name>
            <el-image
              style="width: 100px; height: 100px"
              :src="item.img"
              fit="fit">
            </el-image>
            <el-link href="https://element.eleme.io" target="_blank" :underline="false">{{item.name}}</el-link>
          </div>
          <div class="parameter">
            <p v-for="(parameter,index2) in item.parameter" :key="index2">{{parameter.name}}：{{parameter.value}},</p>

          </div>
          <div class="unit-price">
            <p>￥{{item.unitPrice.oldPrice}}</p>
            <p>￥{{item.unitPrice.newPrice}}</p>

          </div>
          <div class="number">
            <el-input-number size="small" v-model="item.number"></el-input-number>
          </div>
           <div class="price">
            <p>￥{{item.price}}</p>
          </div>
          <div class="operation">
              <el-link :underline="false" icon="el-icon-star-off">移入收藏夹</el-link>
                <el-link :underline="false" icon="el-icon-delete">删除</el-link>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div>
          <ul>
            <li><el-checkbox v-model="checked">全选</el-checkbox></li>
            <li><a>删除</a></li>
            <li><a>移入收藏夹</a></li>
          </ul>
        </div>
        <div>
          <ul>
            <li>已选商品<span>0</span>件</li>
            <li>合计（不含运费）：<font>0.00</font></li>
            <li> <el-button type="primary" round size="medium">结算</el-button></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Cart",
  components: {},
  data() {
    return {
      number:0,
      checked:false,
      list:[
        {
          img:'https://img.alicdn.com/bao/uploaded/i1/1679379594/O1CN01oYXgax2Kk6WxiRX0c_!!1679379594.jpg_80x80.jpg',
          name:'boost爆米花全掌运动内增高鞋垫男女吸汗隐形防臭减震透气软舒适',
          parameter:[
            {name:'颜色',value:'白色'},
            {name:'尺码',value:'42码'},
            {name:'高度',value:'1.5cm'},
          ],
          unitPrice:{
            oldPrice:'89.00',
            newPrice:'29.99',
          },
          number:0,
          price:'99.90',
        },
        {
          img:'https://img.alicdn.com/bao/uploaded/i1/1679379594/O1CN01oYXgax2Kk6WxiRX0c_!!1679379594.jpg_80x80.jpg',
          name:'boost爆米花全掌运动内增高鞋垫男女吸汗隐形防臭减震透气软舒适',
          parameter:[
            {name:'颜色',value:'白色'},
            {name:'尺码',value:'42码'},
            {name:'高度',value:'1.5cm'},
          ],
          unitPrice:{
            oldPrice:'89.00',
            newPrice:'29.99',
          },
          number:0,
          price:'99.90',
        },
        {
          img:'https://img.alicdn.com/bao/uploaded/i1/1679379594/O1CN01oYXgax2Kk6WxiRX0c_!!1679379594.jpg_80x80.jpg',
          name:'boost爆米花全掌运动内增高鞋垫男女吸汗隐形防臭减震透气软舒适',
          parameter:[
            {name:'颜色',value:'白色'},
            {name:'尺码',value:'42码'},
            {name:'高度',value:'1.5cm'},
          ],
          unitPrice:{
            oldPrice:'89.00',
            newPrice:'29.99',
          },
          number:0,
          price:'99.90',
        },
      ]
    };
  },
  created() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.wrap{
  height: 100vh;
}
.w{
  width: 1200px;
  margin:0 auto;
  height: 100%;
  border-radius: 16px;
  background: #fff;
  margin-top:25px;
}
.container{
  // padding: 0 10px;
}
.head{
  padding: 0 10px;
  height: 70px;
  display: flex;
  justify-content:space-between;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
  div{
    font-size: 14px;
    h2{
    color: #000;
    font-size: 18px;
    font-weight: 600;
    }
    em{
      margin-right: 10px;
      font-size: 18px;
      font-weight: 500;
      color: #FF5000;
    }
    em>span{
      font-size: 12px;
      font-weight: 400;
    }
  }
}
::v-deep .el-checkbox__label {
      display: inline-block;
      padding-left: 10px;
      line-height: 19px;
      font-size: 15.5px;
      font-weight: 500;
    }
.body{
  
  .t__header{
    padding: 10px 15px 5px 15px;
    ul{
      margin:0;
      display:flex;
      justify-content:space-between;
      li:nth-child(1){
        width: 90px;
      }
      li:nth-child(2){
        text-align: center;
        width: 230px;
      }
      li:nth-child(3){
        text-align: center;
        width: 180px;
      }
      li:nth-child(4){
        text-align: center;
        width: 100px;
      }
      li:nth-child(5){
        text-align: center;
        width: 130px;
      }
      li:nth-child(6){
        width: 80px;
        text-align: center;
      }
      li:nth-child(7){
        width: 130px;
        text-align: center;
      }
    }
  }
   .t__body:hover{
    //  cursor: pointer;
    border: 1px solid #8ba4f7;
    box-shadow: 0 3px 7px 0 rgba(122, 192, 241, 0.3);
    }
  .t__body{
   
    display: flex;
    justify-content:space-between;
    margin: 10px 15px 15px 15px; 
    padding: 14px 15px;
    border-radius: 8px;
    border: 1px solid #F5F5F5;
    background-color: #F5F5F5;
    box-sizing: border-box;
    div{
      height: 100%;
      // background-color: #f29797;
    }
    .name{
      display: flex;
      align-items: flex-start;
    // justify-content:space-between;
      .el-image{
      border-radius: 8px;
      margin-right: 10px;
    }
    .el-link{
      width: 220px;
      line-height:1.5;
    }
    }
    .parameter{
      display: flex;
      flex-wrap: wrap;
      width: 180px;
      color: #9c9c9c;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size:14px;
      p{
        margin:5px 5px;
      }
    }
    .unit-price{
      p{
        margin: 0;
        margin-bottom: 8px;
        font-weight: 600;
        color: rgb(72, 70, 69);
        font-size:14px;
        font-family: Verdana,Tahoma,arial;
      }
      p:nth-child(1){
      color: #9c9c9c;
      text-decoration: line-through;
      }
      
    }
     .price{
      p{
        margin: 0;
        margin-bottom: 8px;
        font-weight: 600;
        color: #f40;
        font-size:14px;
        font-family: Verdana,Tahoma,arial;
      }
      
    }
    .operation{
      width: 100px;
      .el-link{
        margin-bottom: 8px;
      }
    }
  }
}
.bottom{
  height: 70px;
  border-top: 1px solid #e6e6e6;
  display: flex;
  justify-content:space-between;
  align-items: center;
  ul{
  display: flex;
  justify-content:space-between;
  align-items: center;
  color: #3c3c3c;
  li{
    margin:0 10px;
  }
  }
  span{
    margin:0 5px;
    font-size: 20px;
    color: #f40;
    font-weight: 700;
  }
  font{
    font-size: 22px;
    color: #f40;
    font-weight: 700;
    font-family: tohoma,arial;
  }
}
</style>
